<template>
  <div>
    <el-table
      :data="tableData"
      border
      id="table">
      <el-table-column
        fixed
        prop="id"
        label="编号"
        width="50">
      </el-table-column>
      <el-table-column
        fixed
        prop="date"
        label="日期"
        width="150">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="120">
      </el-table-column>
      <el-table-column
        prop="province"
        label="省份"
        width="120">
      </el-table-column>
      <el-table-column
        prop="city"
        label="市区"
        width="120">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        width="300">
      </el-table-column>
      <el-table-column
        prop="zip"
        label="邮编"
        width="120">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="150">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small" @click="update(scope.row)">修改</el-button>
          <el-button type="text" size="small" @click="delUser(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="修改" :visible.sync="dialogFormVisible">
      <el-form ref="ruleForm" :model="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="编号" prop="id">
          <el-input type="text" readonly v-model="ruleForm.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="日期" prop="date">
          <el-input type="text" v-model="ruleForm.date" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="省份" prop="province">
          <el-input v-model="ruleForm.province"></el-input>
        </el-form-item>
        <el-form-item label="市区" prop="city">
          <el-input v-model="ruleForm.city"></el-input>
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input v-model="ruleForm.address"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        id: 1,
        date: '2016-05-02',
        name: '王小明',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        id: 2,
        date: '2016-05-04',
        name: '王小虎',
        province: '杭州',
        city: '上城区',
        address: '杭州市上城区重庆西路 119 号',
        zip: 200333
      }, {
        id: 3,
        date: '2016-05-01',
        name: '张三',
        province: '北京',
        city: '朝阳区',
        address: '北京市朝阳区长安路 1516 号',
        zip: 200333
      }, {
        id: 4,
        date: '2016-05-03',
        name: '李四',
        province: '上海',
        city: '浦东区',
        address: '上海市浦东区南京路 1219 弄',
        zip: 200333
      }],
      dialogFormVisible: false,
      ruleForm: {
        id: '',
        date: '',
        name: '',
        province: '',
        city: '',
        address: ''
      }
    }
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
    update(row) {
      this.dialogFormVisible = true;
      this.ruleForm = {
        id: row.id,
        date: row.date,
        name: row.name,
        province: row.province,
        city: row.city,
        address: row.address
      };
    },
    submitForm(formName) {
      // 假设不需要验证，直接更新数据
      const index = this.tableData.findIndex(item => item.id === this.ruleForm.id);
      if (index !== -1) {
        this.tableData.splice(index, 1, {
          ...this.ruleForm,
          zip: this.tableData[index].zip
        });
      }
      this.$message({
        message: '修改成功',
        type: 'success'
      });
      this.dialogFormVisible = false;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    delUser(row) {
      const index = this.tableData.findIndex(item => item.id === row.id);
      if (index !== -1) {
        this.tableData.splice(index, 1);
        this.$message({
          message: '删除成功',
          type: 'success'
        });
      }
    }
  }
}
</script>

<style scoped>
#table {
  width: 950px;
  border: 1px solid red;
  margin-top: 200px;
  margin-left: 203px;
}
</style>
